<template>
        <div class="PRODUCT">
            <div class="PRODUCTs">
                <div class="PRODUCTs_left animate__animated animate__fadeInUp animate__delay-0.5s">
                    <slot name="font"></slot>
                </div>
                <div class="PRODUCTs_right deom">
                    
                    <div class="PRODUCTs_right_img animate__animated animate__fadeInUp animate__delay-0.5s" ref="sss"><slot name="primg"></slot></div>
                </div>
            </div>
        </div>
</template>
<script>
export default {
    data() {
        return{
            a:1
        }
    },
}
</script>
<style>
    .PRODUCT{
       width: 100%;
       height: 600px;
       background: #cf372d;
       padding-top: 100px;
       box-sizing: border-box;
       margin-bottom: 0;
   }
   .PRODUCTs{
       width: 80%;
       height: 400px;
       margin: 0 auto;
   }
   .PRODUCTs_left{
       width: 50%;
       height: 400px;
       float: left;
   }
   .PRODUCTs_left>h3{
       font-size: 16px;
       font-style: normal;
       color: #ffffff;
   }
   .PRODUCTs_left>h1{
       font-size: 56px;
       color: #fff;
   }
   .PRODUCTs_left>span{
       font-family: 微软雅黑;
       color: #fff;
   }
   .PRODUCTs_left>p{
       font-size: 12px;
       color: #fff;
       margin-top: 50px;
       padding-right: 20%;
       box-sizing: border-box;
   }
   .PRODUCTs_left>a>div{
       width: 150px;
       height: 40px;
       background: none;
       border: 1px solid #fff;
       color: #fff;
       margin-top:40px;
       text-align: center;
       line-height: 40px;
       padding-bottom: 0;
   }
   .PRODUCTs_left>a>div:hover{
       background: #fff;
       color: #cf372d;
   }
    .PRODUCTs_left>a>button:hover{
        background: #cf372d;
        color: #fff;
    }
   .PRODUCTs_right{
       width: 50%;
       height: 400px;
       float: right;
   }
   .PRODUCTs_right_img{
       width: 100%;
       height: 100%;
       transform: rotate(0);
       padding-left: 10%;
       box-sizing: border-box;
   }
   .PRODUCTs_right_img>img{
       height: 100%;
   }
   .demo{
        text-align: center;
        margin-top: 100px;
    }

    @-webkit-keyframes rotation{
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
    }

    .an{
        -webkit-transform: rotate(360deg);
        animation: rotation 40s linear infinite;
        -moz-animation: rotation 40s linear infinite;
        -webkit-animation: rotation 40s linear infinite;
        -o-animation: rotation 40s linear infinite;
    }
    .img{
        border-radius: 250px;
    }
</style>